<template>
  <div class="addGoods-container">
    <div class="">
      <div class="steps-content out-border">
        <div>
          <el-steps :active="planNum" align-center finish-status="success">
            <el-step title="填写商品消息"></el-step>
            <el-step title="填写商品促销"></el-step>
            <el-step title="填写商品属性"></el-step>
            <el-step title="选择商品关联"></el-step>
          </el-steps>
        </div>
        <div class="pt-5 pb-5">
          <el-form :model="addProductRuleForm" :rules="addProductRules" ref="addProductRuleForm" label-width="100px" class="demo-ruleForm" v-if="planNum == 0">
            <el-form-item label="商品分类" prop="pro_classify" :required="true">
              <el-cascader :options="classifysData" :props="classifysOptions" clearable placeholder="请选择" ref="classifyRef" @change="handleCurrentNode('classifyRef')"></el-cascader>
            </el-form-item>
            <el-form-item label="商品名称" prop="pro_name" :required="true">
              <el-input v-model="addProductRuleForm.pro_name"></el-input>
            </el-form-item>
            <el-form-item label="副标题" prop="pro_vice" :required="true">
              <el-input v-model="addProductRuleForm.pro_vice"></el-input>
            </el-form-item>
            <el-form-item label="商品品牌" prop="pro_brand" :required="true">
              <el-cascader :options="brandsData" :props="brandsOptions" clearable placeholder="请选择品牌" ref="brandRef" @change="handleCurrentNode('brandRef')"></el-cascader>
            </el-form-item>
            <el-form-item label="商品介绍">
              <el-input type="textarea" v-model="addProductRuleForm.pro_desc"></el-input>
            </el-form-item>
            <el-form-item label="商品货号">
              <el-input v-model="addProductRuleForm.pro_cargoNum"></el-input>
            </el-form-item>
            <el-form-item label="商品售价">
              <el-input v-model="addProductRuleForm.pro_price"></el-input>
            </el-form-item>
            <el-form-item label="市场价">
              <el-input v-model="addProductRuleForm.pro_market"></el-input>
            </el-form-item>
            <el-form-item label="商品库存">
              <el-input v-model="addProductRuleForm.pro_Stock"></el-input>
            </el-form-item>
            <el-form-item label="计量单位">
              <el-input v-model="addProductRuleForm.pro_measureUnit"></el-input>
            </el-form-item>
            <el-form-item label="商品重量">
              <el-input v-model="addProductRuleForm.pro_weight"></el-input>
            </el-form-item>
            <el-form-item label="排序">
              <el-input v-model="addProductRuleForm.pro_sort"></el-input>
            </el-form-item>
            <el-button type="primary" class="m-auto d-block" @click="handleNextStep('addProductRuleForm')">下一步, 填写商品促销</el-button>
          </el-form>
          <el-form :model="addProductRuleForm" :rules="addProductRules" ref="addProductRuleForm" label-width="100px" class="demo-ruleForm" v-else-if="planNum == 1">
            <el-form-item label="赠送积分">
              <el-input v-model="addProductRuleForm.pro_measureUnit"></el-input>
            </el-form-item>
            <el-form-item label="赠送成长值">
              <el-input v-model="addProductRuleForm.pro_measureUnit"></el-input>
            </el-form-item>
            <el-form-item label="积分购买限制">
              <el-input v-model="addProductRuleForm.pro_measureUnit"></el-input>
            </el-form-item>
            <el-form-item label="预告商品"><el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"> </el-switch> </el-form-item>
            <el-form-item label="商品上架">
              <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
            </el-form-item>
            <el-form-item label="商品推荐"> <el-switch v-model="value1" inactive-text="按年付费"> </el-switch><el-switch v-model="value1" inactive-text="按年付费"> </el-switch> </el-form-item>
            <el-form-item label="服务保证">
              <el-checkbox v-model="checked">备选项</el-checkbox> <el-checkbox v-model="checked">备选项</el-checkbox> <el-checkbox v-model="checked">备选项</el-checkbox>
            </el-form-item>
            <el-form-item label="详细页标题">
              <el-input v-model="addProductRuleForm.pro_market"></el-input>
            </el-form-item>
            <el-form-item label="详细页描述">
              <el-input v-model="addProductRuleForm.pro_Stock"></el-input>
            </el-form-item>
            <el-form-item label="商品关键字">
              <el-input v-model="addProductRuleForm.pro_measureUnit"></el-input>
            </el-form-item>
            <el-form-item label="商品备注">
              <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea"> </el-input>
            </el-form-item>
            <el-form-item label="选择优惠方式 ">
              <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
                <el-radio-button label="top">top</el-radio-button>
                <el-radio-button label="right">right</el-radio-button>
                <el-radio-button label="bottom">bottom</el-radio-button>
                <el-radio-button label="left">left</el-radio-button>
              </el-radio-group>
              <el-tabs :tab-position="tabPosition" style="height: 200px">
                <el-tab-pane label="用户管理">用户管理</el-tab-pane>
                <el-tab-pane label="配置管理">配置管理</el-tab-pane>
                <el-tab-pane label="角色管理">角色管理</el-tab-pane>
                <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
              </el-tabs>
            </el-form-item>
            <el-button v-if="planNum >= 0">上一步, 填写商品信息</el-button>
            <el-button type="primary" class="m-auto d-block" @click="handleNextStep('addProductRuleForm')">下一步, 填写商品促销</el-button>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { fetchClassifyData, fetchBranchData } from '@/api/api'
export default {
  name: '',
  data() {
    return {
      // 添加商品表单数据
      addProductRuleForm: {
        // 商品分类
        pro_classify: '',
        // 商品名称
        pro_name: '',
        // 商品副标题
        pro_vice: '',
        // 商品品牌
        pro_brand: '',
        // 商品介绍
        pro_desc: '',
        pro_cargoNum: '',
        pro_price: 0,
        pro_market: 0,
        pro_Stock: 0,
        pro_measureUnit: null,
        pro_weight: 0,
        pro_sort: 0,
      },
      // 添加商品表单校验规则
      addProductRules: {
        pro_classify: [{ required: true, message: '请选择商品分类' }],
        pro_name: [{ required: true, message: '请输入商品名称' }],
        pro_vice: [{ required: true, message: '请输入商品副标题' }],
        pro_brand: [{ required: true, message: '请选择商品品牌' }],
      },
      planNum: 0,
      // 分类级联数据
      classifysData: [],
      // 配置分类key属性
      classifysOptions: {
        label: 'name',
        value: 'id',
      },
      // 品牌级联数据
      brandsData: [],
      // 配置品牌key属性
      brandsOptions: {
        label: 'name',
        value: 'id',
      },
    }
  },
  methods: {
    // 校验表单事件
    handleNextStep(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.planNum += 1
        } else {
          this.$message.error('红色*星号属于必填项')
          return false
        }
      })
    },
    async handlerClassifyData() {
      let classifys = await fetchClassifyData()
      this.classifysData = classifys.data
    },
    async handlerBrandData() {
      let brands = await fetchBranchData()
      this.brandsData = brands.data.list
    },
    handleCurrentNode(ref) {
      const checkedNodes = this.$refs[ref].getCheckedNodes()
      let currentNode = checkedNodes[0].label
      if (ref == 'classifyRef') {
        this.addProductRuleForm.pro_classify = currentNode
      } else if (ref == 'brandRef') {
        this.addProductRuleForm.pro_brand = currentNode
      }
    },
  },
  created() {
    this.handlerClassifyData()
    this.handlerBrandData()
  },
}
</script>
<style lang="scss" scoped>
.steps-content {
  width: 800px;
  margin: 20px auto;
  padding: 35px 35px 15px;
}
</style>
